<template>
    <div class="base-page">
        <share-base-page 
            ref="shareBasePageRef" 
            :searchForm="buildSearchForm" 
            :tableActionBtns="buildTableActionBtns" 
            :table="buildTable" 
            :dialogForm="buildDialogForm" 
        ></share-base-page>
        <el-dialog
            :visible.sync="extraDialogVisible"
        >
            <div>extraDialog</div>
        </el-dialog>
    </div>
</template>

<script>
import { ShareBasePage } from '../../packages/index';
import { buildSearchForm, buildTableActionBtns, buildTable, buildDialogForm } from "./buildJsonPage";

export default {
    name:"BasePage",
    components: { ShareBasePage },
    data(){
        return {
            dialogTitle: "新建页面",
            extraDialogVisible: false,
        }
    },
    computed:{
        buildSearchForm,

        buildTableActionBtns(){
            const { changeDialogTitle, openExtraDialogVisible } = this;
            return buildTableActionBtns({
                reloadTableList: (currentPage) => this.$refs['shareBasePageRef'].tableRef.reloadTableList(currentPage),
                changeDialogTitle,
                openExtraDialogVisible
            })
        },

        buildTable() {
            const { changeDialogTitle } = this;
            return buildTable({
                changeDialogTitle: changeDialogTitle
            })
        },
        
        buildDialogForm(){
            return {
                ...buildDialogForm(),
                title: this.dialogTitle
            }
        },
    },
    methods:{
        changeDialogTitle(title){
            this.dialogTitle = title;
        },

        openExtraDialogVisible(){
            this.extraDialogVisible = true;
        }
        
    },


}
</script>

<style>
.base-page{
    height: 100%;
}
</style>